import {
  openDB,
  getAllStudents,
  addStudent,
  getStudent,
  getStudentByName,
  updateStudent,
  deleteStudent,
} from "./indexedDB.js";
var students = [];
const add = (students, db) => {
  students.push({
    id: "",
    name: "",
    age: "",
    gender: "",
    class: "",
    status: "add",
  });
  createTr(students, students.length - 1, db);
};

const saveStudent = async (db, students) => {
  await addStudent(db, students);
  await getAllStus(db);
};

const createInput = (array, index, property) => {
  let input = document.createElement("input");
  input.type = "text";
  input.value = array[index]?.[property] || "";
  input.addEventListener("input", function () {
    array[index][property] = this.value;
  });
  return input;
};

const createBtn = (array, text, index, db) => {
  let btn = document.createElement("button");
  btn.innerHTML = text;
  btn.classList.add("easyBtn");
  btn.addEventListener("click", async () => {
    if (text === "更新") {
      updateStudent(db, array[index].id, array[index]);
    }
    if (text === "删除") {
      await deleteStudent(db, array[index].id);
      await getAllStus(db);
    }
  });
  return btn;
};

const createTr = (students, index, db) => {
  const tbody = document.querySelector("tbody");
  let tr = document.createElement("tr");
  tr.setAttribute("data-index", index);

  let idCell = document.createElement("td");
  let nameCell = document.createElement("td");
  let ageCell = document.createElement("td");
  let genderCell = document.createElement("td");
  let classCell = document.createElement("td");
  let optionsCell = document.createElement("td");
  let spanEle = document.createElement("span");
  spanEle.innerText = students[index]?.id || "";
  let nameInput = createInput(students, index, "name");
  let ageInput = createInput(students, index, "age");
  let genderInput = createInput(students, index, "gender");
  let classInput = createInput(students, index, "class");
  let updateBtn = createBtn(students, "更新", index, db);
  let deleteBtn = createBtn(students, "删除", index, db);
  idCell.appendChild(spanEle);
  nameCell.appendChild(nameInput);
  ageCell.appendChild(ageInput);
  genderCell.appendChild(genderInput);
  classCell.appendChild(classInput);
  optionsCell.appendChild(updateBtn);
  optionsCell.appendChild(deleteBtn);
  tr.appendChild(idCell);
  tr.appendChild(nameCell);
  tr.appendChild(ageCell);
  tr.appendChild(genderCell);
  tr.appendChild(classCell);
  tr.appendChild(optionsCell);
  tbody.appendChild(tr);
};

const clearTr = () => {
  const tbody = document.querySelector("tbody");
  tbody.innerHTML = "";
};

var getAllStus = async (db) => {
  console.log("查询");
  students = await getAllStudents(db);
  console.log("🚀 ~ getAllStus ~ students:", students);
  clearTr();
  students.forEach((item, index) => {
    item.status = "default";
    createTr(students, index, db);
  });
};

const main = async () => {
  const db = await openDB();
  students = await getAllStudents(db);
  console.log("🚀 ~ main ~ students:", students);
  await getStudent(db, "1715838971971");
  students.forEach((item, index) => {
    item.status = "default";
    createTr(students, index, db);
  });
  const addEle = document.getElementById("add");
  const searchEle = document.getElementById("search");
  const saveEle = document.getElementById("save");
  console.log("🚀 ~ addEle:", addEle);
  // 新增
  addEle.addEventListener("click", () => add(students, db));
  // 保存
  saveEle.addEventListener("click", () =>
    saveStudent(
      db,
      students.filter((item) => item.status === "add")
    )
  );
  // 查询
  searchEle.addEventListener("click", async () => {
    const nameInput = document.getElementById("nameInput");
    console.log(
      "🚀 ~ searchEle.addEventListener ~ nameInput:",
      nameInput.value
    );
    if (nameInput.value) {
      console.log("查询");
      students = await getStudentByName(db, nameInput.value);
      clearTr();
      students.forEach((item, index) => {
        item.status = "default";
        createTr(students, index, db);
      });
    } else {
      getAllStus(db);
    }
  });
};
main();

var strategyInput = {
  name: () => {
    const input = document.createElement("input");
    input.classList = ["name"];
    return input;
  },
  age: () => {
    const input = document.createElement("input");
    input.classList = ["age"];
    return input;
  },
  gender: () => {
    const input = document.createElement("input");
    input.classList = ["gender"];
    return input;
  },
  class: () => {
    const input = document.createElement("input");
    input.classList = ["class"];
    return input;
  },
};
